<template>
  <div class="root">
    <div class="template">
      {{ pageTitle }}
      <p>fooRef: {{ fooRef.a }}</p>
      <p>toRef: {{ testRef }}</p>

      <!-- margin 间距 -->
      <div>
        <div style="margin: -10px 0 20px">111111</div>
        <div style="margin: 5px 0 -5px">222222</div>
      </div>

      <!-- 选择器权重 -->
      <ul id="list">
        <li class="orange">111111111111</li>
        <li class="black green">222222222222</li>
        <li style="color: blue" class="orange">3333333333333</li>
      </ul>

      <!-- 宽高比9/16 -->
      <div class="wrapper">
        <div class="child"></div>
      </div>

      <p>teleport</p>
      <my-teleport v-if="showTeleport"></my-teleport>
    </div>
    <div id="myTeleport"></div>

    <!-- suspense -->
    <p>suspense</p>
    <Suspense>
      <template #default>
        <my-suspense></my-suspense>
      </template>
      <template #fallback>
        <h1>Loading...</h1>
      </template>
    </Suspense>
    <!-- Modal -->
    <a-button @click="handleModalClick">Show Modal</a-button>
    <a-base-modal
      :visible="visible"
      @onHandleOk="handleOk"
      @onHandleCancel="handleCancel"
    >
      <template #content> 123 </template>
    </a-base-modal>

    <div ref="nextT" v-if="show1">nextTick</div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  unref,
  toRef,
  toRefs,
} from "vue";
import MyTeleport from "../practise/teleport.vue";
import MySuspense from "../practise/suspense.vue";
import ABaseModal from "@/components/Modal/baseIndex.vue";

export default defineComponent({
  name: "Template",
  props: {},
  data() {
    return {
      showTeleport: false,
      show1: false
    };
  },
  components: { MyTeleport, MySuspense, ABaseModal },
  setup(props) {
    const pageTitle = ref("template-page-1");

    // modal
    const visible = ref<boolean>(false);

    const handleModalClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    };
    //

    // 测试
    const fooRef = reactive({ a: 1, b: 2 });

    setTimeout(() => {
      fooRef.a++;
    }, 5000);

    // toRef
    const test = reactive({ a: 1 });
    const testRef = toRef(test, "a");
    setInterval(() => {
      testRef.value++;
    }, 1000);

    // toRefs
    const state = reactive({
      foo: 1,
      bar: 2,
    });
    console.log(state);
    const { foo, bar } = state;

    const stateAsRefs = toRefs(state);
    // console.log(stateAsRefs)
    // const { foo, bar } = stateAsRefs;
    // console.log(foo, bar);

    // console.log(fooRef)
    // console.log(unref(fooRef));

    /* Promise */
    // console.log(Promise.reject('error')) // new Promise((resolve, reject) => {reject('error')})
    Promise.reject("error")
      .then(
        () => {
          console.log("success1!");
        },
        () => {
          console.log("error1!");
        }
      )
      .then(
        () => {
          console.log("success2!");
        },
        () => {
          console.log("error2!");
        }
      );

    return {
      pageTitle,
      visible,
      handleModalClick,
      handleOk,
      handleCancel,
      fooRef,
      testRef,
    };
  },
  beforeCreate() {
    // this.aaa()
  },
  created() {
    this.aaa();
  },
  mounted() {
    setTimeout(() => {
      this.showTeleport = true;
    }, 2000);
    this.show1 = true;
    setTimeout(() => {
      console.log(this.$refs.nextT)
    }, 0)
    this.$nextTick(() => {
       console.log(this.$refs.nextT)
    })
  },
  methods: {
    aaa() {},
  },
});
</script>

<style lang="scss" scoped>
.wrapper {
  width: 160px;
  .child {
    width: 100%;
    // padding-bottom: calc(100% * (9 / 16));
    aspect-ratio: 16 / 9;
    background-color: lightblue;
  }
}

ul#list li {
  color: red;
}
#list li.black {
  color: black;
}
#list .green {
  color: green;
}
.orange {
  color: orange;
}
</style>